<template>
  <div id="app">
    <!--   搜索 searchBar-->
    <div class="flex" style="position: relative">
      <div class="flex" style="margin-right: 20px">
        <div class="search">姓名：
          <el-input placeholder="请输入人员姓名" clearable style="width:200px" v-model="params.userName" size="small"
                    prefix-icon="el-icon-search">
          </el-input>
        </div>
        <div class="search">角色：
          <el-input placeholder="请输入角色名称" clearable style="width:200px" v-model="params.roleName" size="small"
                    prefix-icon="el-icon-search">
          </el-input>
        </div>
        <div class="search">品牌：
          <el-select size="small" v-model="params.brandPartyId" filterable>
            <el-option v-for="item in brandList" :value="item.id" :label="item.brandPartyName"
                       :key="item.id"></el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" size="small" style="margin-left:10px;" @click="_search" icon="el-icon-search">查询
          </el-button>
          <el-button
              size="small"
              style="
                margin-left: 10px;
                background-color: #303e9d;
                color: #eeeeee;
              "
              @click="_reset"
              icon="el-icon-refresh"
          >重置
          </el-button>
        </div>
        <div style="position: absolute;right:0;bottom: 10px">
          <el-button type="primary" size="small" @click="orderInput({},1)" v-if="authorityList.includes(504)">新增团队人员
          </el-button>
          <el-button type="primary" size="small" @click="sendEmail" v-if="authorityList.includes(502)">发消息</el-button>
          <el-button type="primary" size="small" @click="emailList" style="background-color:#cccccc;color:#374151"
                     v-if="authorityList.includes(503)">消息列表
          </el-button>
        </div>
        <div>
        </div>
      </div>
    </div>
    <!--    tableBar-->
    <!--    任务ID 店铺名称 任务名称 指派人 指派时间 当前进度 立面图 施工人员  监控-->
    <el-table :data="userList" height="calc(100vh - 250px)" border stripe :cell-style="{ 'textAlign': 'center' }"
              :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">

      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="userId" label="用户ID" width="100px"></el-table-column>
      <el-table-column prop="userName" label="用户名" width="250px"></el-table-column>
      <el-table-column prop="phoneNum" label="手机号码" width="250px"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="250px"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width=""></el-table-column>
      <el-table-column prop="updatedAt" label="修改时间"></el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-link style="color: #303e9d;margin-left: 10px" @click="orderInput(scope.row,2)"
                   v-if="authorityList.includes(505)">编辑
          </el-link>
          <!--          <el-link style="color: #ce0e0f;margin-left: 10px">删除</el-link>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="padding: 20px 0;" align="center" @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                   layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
    <!--    新增/编辑团队人员-->
    <el-dialog
        :title="dialogTitle"
        :visible.sync="addUser"
        width="30%"
        center
        :show-close="false"
        :before-close="handleClose">
      <el-form :model="addForm" ref="addForm" :rules="rules" style="display: flex;
                     flex-wrap: wrap;" label-width="100px">
        <el-form-item label="姓名：" prop="userName" style="width: 80%;">
          <el-input size="small" v-model="addForm.userName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="phoneNum" style="width: 80%;">
          <el-input size="small" v-model="addForm.phoneNum" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item label="角色：" prop="roleId" style="width: 80%;">
          <el-select size="small" style="width: 100%" :disabled="userName=='admin'&&addForm.roleId=='1'" clearable
                     v-model="addForm.roleId" filterable
                     placeholder="请选择角色">
            <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
                       :value="item.roleId">
            </el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="登录类型：" prop="loginType" style="width: 80%;">-->
        <!--          <el-select size="small" style="width: 100%" :disabled="userName=='admin'&&addForm.roleId=='1'" clearable-->
        <!--                     v-model="addForm.loginType" filterable-->
        <!--                     placeholder="请选择角色">-->
        <!--            <el-option v-for="item in loginTypeList" :key="item.id" :label="item.name"-->
        <!--                       :value="item.id">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="密码：" prop="password" style="width: 80%;">
          <el-input size="small" v-model="addForm.password" show-password placeholder="请输密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUser = false" style="background:#FFFFFF;border:1px solid #e0e0e0">取 消</el-button>
        <el-button type="primary" @click="editUser" v-if="dialogTitle=='编辑人员信息'">修 改</el-button>
        <el-button type="primary" @click="submitUser" v-else>确 定</el-button>
    </span>
    </el-dialog>
    <send-dialog style="position: absolute" ref="sendDialog"></send-dialog>
    <get-email-list style="position: absolute" ref="emailList"></get-email-list>
  </div>
</template>
<script>
import sendDialog from "./componentDialog/sendDialog.vue";
import getEmailList from "./componentDialog/getEmailList.vue";
import quinn from "../../utils/quinn";
import store from "../../store";

export default {
  name: "userList",
  components: {
    sendDialog,
    getEmailList
  },
  data() {
    return {
      dispatchTime: "",
      userName: "",
      addUser: false,
      addForm: {},
      brandList: [],
      params: {
        userName: "",
        roleName: "",
        pageSize: 20,
        pageNumber: 1,
        brandPartyId: ""
      },
      currentPage: 1,
      totalCount: 0,
      dialogTitle: "",
      userList: [],
      // loginTypeList: [
      //   {
      //     id: 0,
      //     name: "超级管理员"
      //   }, {
      //     id: 1,
      //     name: "公司管理员"
      //   }, {
      //     id: 2,
      //     name: "监理"
      //   }, {
      //     id: 3,
      //     name: "经理"
      //   }, {
      //     id: 4,
      //     name: "门店客户"
      //   }, {
      //     id: 5,
      //     name: "售后"
      //   }, {
      //     id: 6,
      //     name: "装修工人"
      //   }, {
      //     id: 7,
      //     name: "品牌方发起人"
      //   }, {
      //     id: 8,
      //     name: "督查"
      //   }, {
      //     id: 9,
      //     name: "店长"
      //   }, {
      //     id: 10,
      //     name: "品牌方支持专员"
      //   }, {
      //     id: 11,
      //     name: "供应商"
      //   }, {
      //     id: 12,
      //     name: "预算审核专员"
      //   }
      // ],
      roleList: [],
      authorityList: [],
      rules: {
        userName: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        phoneNum: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        roleId: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        // loginType: [
        //   {required: true, message: '请输入', trigger: 'blur'},
        // ],
      }

    }
  },
  created() {
    this.getBrand()
    const {authorityList = []} = quinn.getStorage("userDatav3") || store.state.userData || {};
    const {userName} = quinn.getStorage("userDatav3") || store.state.userData || {};
    this.authorityList = authorityList
    this.userName = userName
  },
  methods: {
    getBrand() {
      this.$api.storeGetBrandPartyList().then(res => {
        this.brandList = res
        this.params.brandPartyId = res[0].id
        this.getUserList()
      })
    },
    _reset() {
      this.params = this.$options.data.call(this).params
    },
    _search() {
      this.params.pageNumber = 1
      this.getUserList()
    },
    getUserList() {
      const params = this.params
      this.$api.userUserList(params).then(res => {
        this.userList = res.data
        this.totalCount = res.total
      })
    },
    sendEmail() {
      this.$refs.sendDialog.handleOpen(this.userList)
    },
    orderInput(row, type) {
      this.addForm = this.$options.data(this).addForm
      row.roleId = Number(row.roleId)
      this.$api.roleGetRoleList().then(res => {
        this.roleList = res
      })
      if (type == 1) {
        this.dialogTitle = "新增人员信息"
      } else {
        this.dialogTitle = "编辑人员信息"
        this.addForm = row
      }
      this.addUser = true
    },
    handleClose() {

    },
    submitUser() {
      this.$api.userAddUser(this.addForm).then(res => {
        if (res == 1) {
          this.$message.success("操作成功！")
          this.addUser = false
          this.getUserList()
        }
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getUserList()
    },
    editUser() {
      this.$api.userUserInfoUpdate(this.addForm).then(res => {
        if (res == 1) {
          this.$message.success("操作成功！")
          this.addUser = false
          this.getUserList()

        }
      })
    },
    emailList() {
      this.$refs.emailList.handleOpen()
    }
  }
}
</script>
<style scoped>

@import "../../assets/css/public.css";
</style>